<template>
<!--    首页新闻信息-->
    <div>
<!--        分类筛选选择条-->
        <div>
            <van-row>
                <van-col span="19" v-if="islogin">
                    <van-tabs @click="changes($event)" color="#FD7304">
                        <van-tab v-for="(item,index) in SubListRight" :key="index"
                                 :title="item.name" style="position: relative" @click="onClick(item.id)" ref="test">
                        </van-tab>
                    </van-tabs>
                </van-col>
                <van-col span="19" v-else>
                    <van-tabs @click="changes($event)" color="#FD7304">
                        <van-tab v-for="(item,index) in list" :key="index"
                                 :title="item.name" style="position: relative" @click="onClick(item.id)" ref="test">
                        </van-tab>
                    </van-tabs>
                </van-col>
                <van-col span="5">
                    <Alert></Alert>
                </van-col>
            </van-row>


            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                >
                    <!--       骨架屏-->
                    <div v-if="loadings">
                        <van-skeleton title :row="20"/>
                    </div>
                    <!--        对应新闻-->
                        <ul class="news_box" v-if="!isLoading">
                            <router-link :to="'/NewsPage/'+items.articleId" tag="li" v-for="(items,value) in NewsList" :key="value">
                                <!--                左边内容-->
                                <van-row>
                                    <van-col span="18">
                                        <div class="news_box_content_top">{{items.title}}</div>
                                        <div class="news_box_content_bottom">
                                            <van-row type="flex" justify="space-between">
                                                <van-col span="18">
                                                    {{items.sendTime}}
                                                </van-col>
                                                <van-col span="4" >
                                                    <van-icon name="eye-o" style="vertical-align: middle;margin-right: 3px" />
                                                    {{items.readNum}}</van-col>
                                            </van-row>
                                        </div>
                                    </van-col>
                                    <van-col span="6">
                                        <!--                右边图片-->
                                        <img :src=items.bannerImgUrl alt="" style="width: 100%;height: 60px">
                                    </van-col>
                                </van-row>
                            </router-link>
                        </ul>

                </van-list>
            </van-pull-refresh>
        </div>



    </div>
</template>

<script>
    import Alert from "./Alert";
    //获取分类列表
    import {getClassification} from '../../api/GoodNews'
    //获取新闻列表
    import {getNewsList} from '../../api/GoodNews'
    import {mapState} from 'vuex'
    import moment from 'moment'
    export default {
        name: "Plate",
        components:{
            Alert
        },
        data() {
            return {
                loading: false,
                isLoading:false,
                finished: false,
                refreshing: false,
                list:[],
                end:'',
                newslist:[],
                normalList:[],
                offset:5,
                loadings: true,
            };
        },
        created() {
            this.$store.commit("favorite",
                {favorite: 0,})
            getClassification(10).then(
                res=>{
                    this.list = res.rows
                    this.list = this.list.splice(0,17)
                    getNewsList(1,this.offset,1).then(res=>{
                        this.normalList = res.rows
                        // console.log(this.sendNewsTime)
                        this.$store.commit('changeNewsList',{NewsList:this.normalList})
                    })
                    this.loadings = false
                },
        )
        },
        methods: {
            onLoad() {
                getNewsList(1,this.offset,this.end).then(res=>{
                    // console.log(res)
                    this.normalList = this.normalList.concat(res.rows)
                    this.$store.commit('changeNewsList',{NewsList:this.normalList})
                    this.loading = false
                    this.offset+=5
                })
            },
            onRefresh() {
                this.loadings = true
                this.isLoading = true
                this.$store.commit('changeNewsList',{NewsList:[]})
                //页面刷新判断如果end(该类型的新闻)的索引为空，因为一上来在首页，以强制该类型为1的
                if (this.end ==''){
                    // console.log("空")
                    getNewsList(1,this.number,1).then(res=>{
                        // console.log(res)
                        this.normalList = res.rows
                        this.$store.commit('changeNewsList',{NewsList:this.normalList})
                        this.loadings = false
                        this.isLoading = false;
                        this.refreshing = false
                    })
                //    反之动态渲染
                }else{
                    this.loadings = true
                    getNewsList(1,this.number,this.end).then(res=>{
                        // console.log(res)
                        this.normalList = res.rows
                        this.$store.commit('changeNewsList',{NewsList:this.normalList})
                        this.loadings = false
                        this.isLoading = false;
                        this.refreshing = false
                    })
                }

            },
            changes(e){
                console.log(this.$refs.test)
                this.end = e+1
                getNewsList(1,this.offset,this.end).then(res=>{
                    // console.log(res)
                    this.newslist = res.rows
                    this.$store.commit('changeNewsList',{NewsList:this.newslist})
                })
            },
            onClick(item,index){
                console.log(123)
            }
        },
        computed:{
            ...mapState({
                NewsList:'NewsList',
                SendTime:'SendTime',
                SubListRight:'SubListRight',
                islogin:'islogin'
            })
        }
    }
</script>

<style scoped lang="less">
    .news_box{
        margin-top: 5px;
        li{
            border-top: 1px solid #cccccc;
            padding: 10px 10px;
            .news_box_content_top{
                width: 80%;
                word-break: normal;
                font-weight: bold;
                font-size: 16px;
            }
            .news_box_content_bottom{
                font-size: 14px;
                color: #C7C7C7;
                margin-top: 15px;
            }
        }
    }
</style>